<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 基本选择器 */
			footer{}
			#footer{}
			.footer{}
			
			/* 群组选择器 */
			ul,li{
				list-style: none;
				padding-left: 0px;
			}
			
			/* 子孙选择器，#nav包含的所有ul元素 */
			#nav ul{
				
			}
			
			/* 子选择器，#nav包含的ul子元素 */
			#nav >ul>li{
				color: white;
				background-color: red;
			}
			#nav >ul >li >ul >li{
				background-color: blue;
			}
			
			/* 标签名，class名 */
			/* 黑色用 #333333 */
			a.link{
				color: #333333;
			}
			
			/* 伪类选择器 */
			a:hover{
				color: blue;
			}
			
			/* 伪元素选择器 */
			p.text:before {
				content: '';
				width: 10px;
				height: 10px;
				display: block;
				border-radius: 10px;
				background-color: blue;
			}
			
			/* 优先级 id>class>tag */
			/* !important 提升样式优先级 */
			.red {color: red;}
			#blue{color: blue;}
			p {color: gray !important;}
		</style>
	</head>
	<body>
		<p class="red" id="blue">样式的优先级</p>
		
		<p class="text">这是一段文本</p>
		
		<a href="www.baidu.com" class="link">百度一下，你就知道</a>
		
		<!-- 二级菜单 -->
		<nav id="nav">
			<ul>
				<li>
					<p>电器</p>
					<ul>
						<li><a>空调</a></li>
						<li><a>电视</a></li>
						<li><a>冰箱</a></li>
						<li><a>洗衣机</a></li>
					</ul>
				</li>
				<li>
					<p>电器</p>
					<ul>
						<li><a>空调</a></li>
						<li><a>电视</a></li>
						<li><a>冰箱</a></li>
						<li><a>洗衣机</a></li>
					</ul>
				</li>
			</ul>
		</nav>
		
		<footer>
			<p>作者:xxx</p>
			<!-- 调起系统电话 -->
			<p>电话:<a href="tel:4001001001">400-100-1001</a></p>
			<!-- 调起系统短信 -->
			<p>手机:<a href="sms:19810011001">19810011001</a></p>
			<!-- 调起系统邮箱 -->
			<p>Email:<a href="mailto:123456@qq.com">123456@qq.com</a></p>
		</footer>
	</body>
</html>